<template>
  <view class="discovery-container">
    <!-- 非骑手状态 -->
    <view v-if="authItme.run_apply_status < 1" class="non-rider-view">
      <ikz-loading :css-data="loading_css"></ikz-loading>
      <!-- 引导卡片 -->
      <view class="guide-card">
        <view class="card-header">
          <view class="title">加入校园跑腿骑手</view>
          <view class="subtitle">开启灵活赚钱之旅</view>
        </view>
        
        <view class="benefits-list">
          <view class="benefit-item" v-for="(item, index) in benefits" :key="index">
            <view class="benefit-icon" :class="'icon-'+index"></view>
            <view class="benefit-text">{{item}}</view>
          </view>
        </view>
        
        <view class="apply-btn" @click="goApply1">
          <text>立即申请</text>
          <view class="arrow-icon"></view>
        </view>
      </view>
      
      <ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
    </view>
    
    <!-- 骑手状态 -->
    <view v-else class="rider-view">
      <ikz-loading :css-data="loading_css"></ikz-loading>

      
      <!-- 内容区域 -->
      <scroll-view class="content-scroll" scroll-y>
        <!-- 订单列表 -->
        <view class="order-list-section">
          <ikz-glist
            :show-type="type_list"
            :show-data="show_info"
            :more-status="load_more"
            @returnId="returnId"
            @typeInfo="typeInfo"
            :receiver="isReceiver"
          ></ikz-glist>
        </view>
      </scroll-view>
      
      <!-- 底部占位 -->
      <view class="bottom-spacer"></view>
      <ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
    </view>
  </view>
</template>
<script>
import ikzLoading from "@/pages/Component/Public/Loading/loading.vue";
import ikzGlist from "@/pages/Component/Public/Glist/public/glist/glist.vue";
import ikzTabbar from "@/pages/Component/Public/tab-bar/tab-bar.vue";
var app = getApp();
import ikz from "@/pages/Common/tools.js";
export default {
  components: {
    ikzLoading,
    ikzGlist,
    ikzTabbar,
  },
  data() {
    return {
      show_info: {
        list: [],
      },
      authItme: {},
      type_list: {
        list: [],
      },
      loading_css: {
        display: "flex",
      },
      service_img: app.globalData.service_img,
      page: 1,
      limit: 10,
      load_more: 5,
      order_type: "",
      show_status: "2",
      tabbar_Data: {
        type: 0,
        list: [],
      },
      // 是否为抢单员
      isReceiver: 0,
    };
  },
  created() {},
  onLoad() {
    uni.hideTabBar();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.listInfo((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (this.load_more == 2) {
      this.page++;
      this.load_more = 3;
      this.listInfo((res) => {});
    }
  },
  onShow() {
    this.getAuth();
    if (uni.getStorageSync("local_user_session")) {
      this.tabbar_Data.list = app.globalData.tabBarInfo;
      this.tabbar_Data.type = app.globalData.tabBarInfo.length - 3;
      if (this.show_status == 2) {
        this.page = 1;
        this.typeInfo();
        this.show_status = 3;
      } else {
        this.page = 1;
        this.listInfo((res) => {});
      }
      this.handleReceiver();
    } else {
      uni.redirectTo({
        url: "/pages/login/index",
      });
    }
  },
  onShareTimeline() {},
  onShareAppMessage() {
    // const promise = new Promise(resolve => {
    //   setTimeout(() => {
    //     resolve({
    //       title: '自定义转发标题',
    //       imageUrl:'https://xybaddon.maiwd.cn/shareButton.png',
    //     })
    //   }, 2000)
    // })
    return {
      title: app.globalData.share_info.share_title,
      path: "/pages/Home/index",
      imageUrl: app.globalData.share_info.share_img,
    };
  },
  methods: {
    goApply1() {
      uni.navigateTo({
        url: `/pages/Component/Module/Receiver/Program/apply/index/index?vip=true`
      });
    },
    getAuth() {
      //跳转申请抢单员
      var path = "/xyb/user/auth";
      var data = {};
      ikz.post(path, data, (res) => {
        console.log(res.data.data.run_apply_status);
        if (res.data.code) {
          this.authItme = res.data.data;
        }
      });
    },
    // 判断是否是抢单员
    handleReceiver() {
      var path = "/xyb/user/is_receiver";
      var url = app.globalData.adminPath + path;
      var data = {
        app_plat: "MP-WEIXIN",
        token: uni.getStorageSync("local_user_session"),
        agent_id: uni.getStorageSync("default_agent").id || "",
      };
      if (data.token) {
        uni.request({
          url: url,
          header: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          data: data,
          method: "POST",
          success: (res) => {
            console.log("是否为抢单员", res.data.data.is_receiver);
            uni.setStorageSync("receivers", res.data.data.is_receiver);
            this.isReceiver = res.data.data.is_receiver;
          },
          fail: function (res) {
            //调用接口失败或回传失败
            // uni.showModal({
            // 	title: '服务器繁忙',
            // 	content: '服务器繁忙或网络不稳定，请稍后再试！'
            // })
          },
        });
      }
    },
    returnId(e) {
      this.order_type = e;
      this.page = 1;
      this.listInfo((res) => {});
    },
    //分类
    typeInfo() {
      var path = "/xyb/server/list";
      ikz.post(path, {}, (res) => {
        if (res.data.code) {
          this.type_list.list = res.data.data;
          // this.order_type = res.data.data[0].id
          this.listInfo((res) => {});
          this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
    },
    listInfo(fn) {
      this.loading_css.display = "flex";
      var path = "/xyb/mp_weixin_home/server_list";
      var data = {
        page: this.page,
        limit: this.limit,
        order_type: this.order_type,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          var temp_list = res.data.data.data;
          if (this.page != 1) {
            for (var i = 0; i < temp_list.length; i++) {
              this.show_info.list.push(temp_list[i]);
            }
          } else {
            this.show_info.list = temp_list;
          }
          if (temp_list.length == this.limit) {
            this.load_more = 2;
          } else {
            if (this.page == 1) {
              if (temp_list.length == 0) {
                this.load_more = 5;
              } else {
                this.load_more = 4;
              }
            } else {
              this.load_more = 4;
            }
          }
          this.$forceUpdate();
        } else {
          uni.showModal({
            title: "提示",
            content: res.data.msg,
            showCancel: false,
            success: function (res) {},
          });
        }
        this.loading_css.display = "none";
        fn();
      });
    },
    goApply() {
      var path = "/pages/Component/Module/Receiver/Program/apply/index/index";
      ikz.nav(path, "n", "");
    },
    showTreaty() {
      this.treaty_status = 2;
    },
    //不同意
    cancelTreaty() {
      //退出程序
      // plus.runtime.quit();
    },
    //查看平台协议
    getTreaty(e) {
      var id = e.currentTarget.dataset.id;
      var path = "/pages/Component/Module/Login/treaty/index?id=" + id;
      ikz.nav(path, "n", "");
    },

    //请求页面数据
    getList() {
      var path = "/Supply/Wechat/Public/indexPage";
      var data = {
        longitude: this.longitude,
        latitude: this.latitude,
      };
      ikz.get(path, data, (res) => {
        if (res.data.status == "success") {
        } else {
          uni.showModal({
            title: "提示",
            content: "服务器繁忙，请稍后再试",
            showCancel: false,
            success: function (res) {},
          });
        }
        // if(that.pull_status){
        // 	this.$emit("change",'pull');
        // }
      });
    },

    //跳转至招聘中心
    getRecriut() {
      let url = "/pages/Component/Module/Demand/Program/Recruit/index";
      ikz.nav(url, "n");
    },
  },
};
</script>

<style lang="scss" scoped>
/* 颜色变量 */
$primary-color: #FBAB7E;
$secondary-color: #F8C66D;
$text-color: #333;
$light-text: #666;
$white: #fff;
$bg-color: #f8f8f8;
$card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

.discovery-container {
  height: 100vh;
  background-color: $bg-color;
}

/* 通用样式 */
.hero-banner {
  position: relative;
  width: 100%;
  height: 300rpx;
  
  .banner-image {
    width: 100%;
    height: 100%;
  }
  
  .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
  }
}

/* 非骑手状态样式 */
.non-rider-view {
  .guide-card {
    position: relative;
    margin: -60rpx 30rpx 0;
    padding: 40rpx;
    background: $white;
    border-radius: 24rpx;
    box-shadow: $card-shadow;
    z-index: 10;
    
    .card-header {
      text-align: center;
      margin-bottom: 40rpx;
      
      .title {
        font-size: 36rpx;
        font-weight: 600;
        color: $text-color;
        margin-bottom: 10rpx;
      }
      
      .subtitle {
        font-size: 28rpx;
        color: $light-text;
      }
    }
    
    .benefits-list {
      .benefit-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        
        &:last-child {
          border-bottom: none;
        }
        
        .benefit-icon {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 20rpx;
          background-size: 60%;
          background-position: center;
          background-repeat: no-repeat;
          
          &.icon-0 {
            background-color: #E3F2FD;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232196F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpolyline points='12 6 12 12 16 14'%3e%3c/polyline%3e%3c/svg%3e");
          }
          
          &.icon-1 {
            background-color: #E8F5E9;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'%3e%3c/path%3e%3c/svg%3e");
          }
          
          &.icon-2 {
            background-color: #FFF8E1;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFA000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3e%3c/path%3e%3c/svg%3e");
          }
          
          &.icon-3 {
            background-color: #FFEBEE;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F44336' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'%3e%3c/path%3e%3c/svg%3e");
          }
        }
        
        .benefit-text {
          font-size: 28rpx;
          color: $text-color;
          flex: 1;
        }
      }
    }
    
    .apply-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 90rpx;
      margin-top: 40rpx;
      background: linear-gradient(135deg, $secondary-color, $primary-color);
      border-radius: 45rpx;
      color: $white;
      font-size: 32rpx;
      font-weight: 500;
      
      .arrow-icon {
        width: 24rpx;
        height: 24rpx;
        margin-left: 10rpx;
        border-right: 2rpx solid $white;
        border-bottom: 2rpx solid $white;
        transform: rotate(-45deg);
      }
    }
  }
}

/* 骑手状态样式 */
.rider-view {
  .content-scroll {
    height: calc(100vh - 300rpx);
    padding: 30rpx;
  }
  
  .order-list-section {
    background: $white;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: $card-shadow;
  }
  
  .bottom-spacer {
    height: 120rpx;
  }
}

/* 响应式调整 */
@media (max-width: 375px) {
  .non-rider-view {
    .guide-card {
      margin: -40rpx 20rpx 0;
      padding: 30rpx;
    }
  }
  
  .rider-view {
    .content-scroll {
      padding: 20rpx;
    }
  }
}
</style>